<template>
    <ph-flex :class="cns">
        <div class="ph-nav-left">
            <toggle-aside v-if="showToggleAside" shape="square" icon="navicon" @click="toggleAside&&toggleAside()"></toggle-aside>
            <slot name="left"></slot>
        </div>
        <div class="ph-nav-center"><slot name="center"></slot></div>
        <div class="ph-nav-right"><slot></slot></div>
    </ph-flex>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent, provide, inject, toRef, computed, Ref } from 'vue'
import PhFlex from 'ph-flex'
export default defineComponent({
    components:{
        PhFlex,
        ToggleAside:defineAsyncComponent(()=>import("./nav-action.vue"))
    },
    props:{
        theme:{
            type:String
        },
        cursor:{
            type:Boolean,
            default:true
        },
        current:{
            type:String
        },
        showToggleAside:{
            type:Boolean,
            default:true
        }
    },
    setup(props,{emit}) {
        provide("phNavCursor",toRef(props,'cursor'))
        provide("phNavCurrent",toRef(props,'current'))
        provide("phNavNotify",(action:string)=>{
            emit('navigate',action)
        })
        const toggleAside = inject("phToggleAside") as ()=>void
        const topTheme = inject<Ref<string>>("theme")
        const cns = computed(()=>{
            const theme = props.theme||topTheme?.value||"dark"
            return ['ph-nav','ph-nav-'+theme]
        })
        return {
            cns,
            toggleAside
        }
    },
})
</script>
<style lang="scss">
.ph-nav{
    position:relative;
    padding: var(--ph-nav-padding);
    height: var(--ph-topbar-height);
    min-height: var(--ph-topbar-height);
    font-size:var(--phx);
    flex: 1;
    justify-content: space-between;
    align-items: center;
    overflow: visible;
    font-size:var(--phx);
    & > div{
        height: 100%;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
    }
    --ph-nav-color:var(--ph-c-light);
    --ph-nav-color-dark:var(--ph-c-light);
    --ph-nav-color-active:var(--ph-c-light);
    --ph-nav-bd:var(--ph-bd-light);

    .ph-subnav{
        --ph-nav-color:var(--ph-c);
        --ph-nav-color-dark:var(--ph-c-d1);
        --ph-nav-bg:var(--ph-light-l2);
        --ph-nav-bg-hover:var(--ph-light);
    }
    &-dark,
    &-dark .ph-subnav{
        --ph-nav-color:var(--ph-c-l2);
        --ph-nav-bd:var(--ph-bd-dark);
        --ph-nav-color-dark:var(--ph-c-light);

        --ph-nav-bg:var(--ph-dark);
        --ph-nav-bg-hover:var(--ph-dark-d1);
        --ph-nav-bg-dark:var(--ph-dark-d1);
        --ph-nav-bg-active:var(--ph-dark-d1);
    }
    &-light{
        --ph-nav-bd:var(--ph-bd-light);
        --ph-nav-color:var(--ph-c);
        --ph-nav-color-dark:var(--ph-c-d1);

        --ph-nav-bg:var(--ph-light-light);
        --ph-nav-bg-dark:var(--ph-light);
        --ph-nav-bg-hover:var(--ph-light-l1);
        --ph-nav-bg-active:var(--ph-theme);
    }
    &-primary{
        --ph-nav-bg:var(--ph-blue-l2);
        --ph-nav-bg-hover:var(--ph-blue-bga5);
        --ph-nav-bg-dark:var(--ph-blue);
        --ph-nav-bg-active:var(--ph-blue);
        --ph-theme:var(--ph-blue-d1);
    }
    &-success{
        --ph-nav-bg:var(--ph-green-l2);
        --ph-nav-bg-hover:var(--ph-green-bga5);
        --ph-nav-bg-dark:var(--ph-green);
        --ph-nav-bg-active:var(--ph-green);
        --ph-theme:var(--ph-green-d1);
    }
    &-danger{
        --ph-nav-bg:var(--ph-red-l2);
        --ph-nav-bg-hover:var(--ph-red-bga5);
        --ph-nav-bg-dark:var(--ph-red);
        --ph-nav-bg-active:var(--ph-red);
        --ph-theme:var(--ph-red-d1);
    }
    &-warning{
        --ph-nav-bg:var(--ph-orange-l2);
        --ph-nav-bg-hover:var(--ph-orange-bga5);
        --ph-nav-bg-dark:var(--ph-orange);
        --ph-nav-bg-active:var(--ph-orange);
        --ph-theme:var(--ph-orange-d1);
    }
    &:before{
        content:"";
        position: absolute;
        top:5px;
        bottom:5px;
        left:0;
        right:0;
        background-color: var(--ph-nav-bg);
    }
    background-color:var(--ph-nav-bg-dark);
    color: var(--ph-nav-color);
}
</style>
